<template>
	<view class="content page">
		<status-bar :title="nameDefinition.balanceTitle?'我的'+ nameDefinition.balanceTitle:'我的余额'"></status-bar>
		<!-- 返回顶部 -->
		<backTop v-if='toTop'></backTop>
		<view class="moneyNum thmeBg" :style="{'--color': color}">
			<view class="userMoney">账户{{nameDefinition.balanceTitle?nameDefinition.balanceTitle:'余额'}}({{nameDefinition.balanceUnit?nameDefinition.balanceUnit:'元'}})</view>
			<view class="money_info_money">
				￥<text class="num">{{myMoneys}}</text>
			</view>
		</view>
		<view class="moneyList" v-if='payState == 1'>
			<navigator url="/moneyPage/capital/withdraw" hover-class="none" class="flex-box">
				<view class="listsImg">
					<image :src="staticUrl+'/images/money_tx.png'" mode="widthFix"></image>
				</view>
				<view class="listsCont flex flex-box align-center flex-between">
					<text>提现</text>
					<text class="iconfont icon-xiangyouxiayiye"></text>
				</view>
			</navigator>
		</view>
		<view class="moneyList" v-if='payState == 1'>
			<view class="flex-box" @click="recharge('/moneyPage/capital/recharge')">
				<view class="listsImg">
					<image :src="staticUrl+'/images/money_cz.png'" mode="widthFix"></image>
				</view>
				<view class="listsCont flex flex-box align-center flex-between" style="border: none;">
					<view>充值</view>
					<text class="iconfont icon-xiangyouxiayiye"></text>
				</view>
			</view>
		</view>
		<view class="hrBr"></view>
		<view class="moneyList" v-if='payState == 1'>
			<navigator url="/moneyPage/capital/detail" hover-class="none" class="flex-box">
				<view class="listsImg">
					<image :src="staticUrl+'/images/money_tx_jl.png'" mode="widthFix"></image>
				</view>
				<view class="listsCont flex flex-box align-center flex-between">
					<text>提现记录</text>
					<text class="iconfont icon-xiangyouxiayiye"></text>
				</view>
			</navigator>
		</view>
		<view class="moneyList">
			<navigator url="/moneyPage/capital/recharge_Info" hover-class="none" class="flex-box">
				<view class="listsImg">
					<image :src="staticUrl+'/images/money_cz_jl.png'" mode="widthFix"></image>
				</view>
				<view class="listsCont flex flex-box align-center flex-between">
					<text>{{nameDefinition.balanceTitle?nameDefinition.balanceTitle:'余额'}}明细</text>
					<text class="iconfont icon-xiangyouxiayiye"></text>
				</view>
			</navigator>
		</view>
		<view class="moneyList" v-if='payState == 1'>
			<navigator url="/moneyPage/capital/brokerage_list" hover-class="none" class="flex-box">
				<view class="listsImg">
					<image :src="staticUrl+'/images/money_ye_mx.png'" mode="widthFix"></image>
				</view>
				<view class="listsCont flex flex-box align-center flex-between" style="border: none;">
					<text>{{nameDefinition.profitTitle?nameDefinition.profitTitle:'收益'}}明细</text>
					<text class="iconfont icon-xiangyouxiayiye"></text>
				</view>
			</navigator>
		</view>
		<view class="submitBtn thmeBg" :style="{'--color': color}" @click="back()">返回</view>
		<showModel @cancelFunc='showModal = false' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				
				nameDefinition: uni.getStorageSync('startUp').nameDefinition,
				color: getApp().globalData.color,
				toTop: false,
				myMoneys: "0.00",
				staticUrl: this.staticUrl,
				payState: uni.getStorageSync('startUp').payState, // 是否开起支付功能 1开起 0不开启
				vid: '',
				showModal: false, // 是否显示模态框
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				that.toTop = true;
			} else {
				that.toTop = false
			}
		},
		onShow() {
			that = this
			that.vid = uni.getStorageSync("vid")
			that.getMoney();
			uni.setNavigationBarTitle({
				title:that.nameDefinition.balanceTitle?"我的"+ that.nameDefinition.balanceTitle:'我的余额'
			})
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + that.vid + '&pageType=99',
				imageUrl: shareData.imageUrl
			}
		},
		onLoad(e) {
			// #ifdef H5
			this.H5Share()
			// #endif
		},
		methods: {
			recharge(url) { //获取用户充值配置
				that.$http.get({
					url: '/SRA_memberRecharge/config',
					data: {
						VeriCode: uni.getStorageSync('bid'),
						vId: that.vid
					}
				}).then(res => {
					let rechData = res.data
					if (!res.data || rechData.myJson && rechData.myJson.rechargeState == 0) {
						uni.showToast({
							icon: "none",
							title: "抱歉！您不能充值~~",
							duration: 2000
						})
					} else {
						if (that.vid) {
							uni.navigateTo({
								url: url
							})
						} else {
							that.showModal = true;
						}
					}
				})
			},
			getMoney: function() {
				that.$http.get({
					url: '/singleSaleApi/singleCommission',
					data: {
						v_id: that.vid
					}
				}).then(res => {
					if (res.errcode == 100) {
						that.myMoneys = res.data.v_money
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background-color: #F8F8F8;
		font-size: 28upx;
		.moneyNum {
			width: 100%;
			height: 340upx;
			padding: 30upx;
			.userMoney {
				width: 100%;
				text-align: left;
				color: #FFFFFF;
			}
			.money_info_money{
				color: #FFFFFF;
				text-align: left;
				margin-top: 100upx;
				.num{
					font-size: 72upx;
				}
			} 
		}
		.moneyList {
			width: 100%;
			height: 80upx;
			overflow: hidden;
			background: #FFFFFF;
			.listsImg {
				float: left;
				width: 32upx;
				height: 32upx;
				padding: 24upx 30upx;
				image {
					width: 32upx;
					height: 32upx;
				}
			}
			.listsCont {
				height: 80rpx;
				margin-left: 30rpx;
				padding-right: 24rpx;
				border-bottom: 1px solid #F7F7F7;
			}
		}
		.hrBr {width: 100%;height: 30upx;}
		.submitBtn {
			position: fixed;
			left: 15px;
			bottom: 15px;
			width: calc(100% - 60upx);
			padding: 30upx 0;
			text-align: center;
			border-radius: 10upx;
			margin-top: 30upx;
			color: #FFFFFF;
			margin-bottom: constant(safe-area-inset-bottom);
			margin-bottom: env(safe-area-inset-bottom);
		}
	}
</style>
